<template>
  <div class="apply-container">
    <div class="w1200">
        <h3 class="form-title">入驻申请</h3>
        <el-form
          ref="applyForm"
          :model="applyForm" 
          :rules="applyRules" 规则
          label-width="auto"
          class="apply-from"
          label-position="left"  
               >
          <el-form-item prop="name">
            <el-input v-model="rapplyForm.name" placeholder="请输入姓名"/>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              v-model="applyForm.phone"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item prop="resource">
            <el-inputv-model="applyForm.resource" placeholder="请输入您要供应的资源" />
          </el-form-item>
          <el-form-item>
            <el-button round type="primary" size="medium" style="width: 150px" @click="handleSubmit" :loading="loading"
            >提交信息</el-button
          >
          </el-form-item>
  </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApplyForm',
  data() {
    const validatePhone = (rule,value,callback) => {
        const reg = /^1[3-9]\d{9}$/ // 第一位是1，第二位3-9中任意一个数字，后面九位数字任意
        if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号'))
      } else {
        callback()
      }
    }
    return {
        loading: false,
        applyFrom: {
            name: '', phone: '',resource: ''
        },
        applyRules: {
          name:[{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [{ required: true, message: '请输入手机号', trigger: 'blur', validator: validatePhone }],
        resource: [{ required: true, message: '请输入您要供应的资源', trigger: 'blur' }]
        }
    }
  },
  methods: {
    handleSumbit() {
      this.$refs.applyForm.validate(async (valid) => {
        if(valid) {
          this.loading = true
          console.log(this.applyFrom)
          try {
            const res = await this.$req('/application', 'post', this.applyForm)
          console.log('data',res)
          if(res.code === 20000) {
            this.loading =false
            this.$message({
              type: 'success',
                          })
                          this.$refs.applyFrom.resetFields()
          }
          } catch(error) {
            this.loading = false
            console.log('error',error)
          }
        } else {
          console.log('error sumbit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
